<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大拇哥资源共享平台</title>
    <!--视口 不缩放 -->
    <meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
    <meta name="flexible" content="initial-dpr=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 网页作者 -->
    <meta name="author" content="hg" />
    <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    <!-- 设置苹果工具栏颜色 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="msapplication-TileColor" content="#000" />
    <!--<link href="logo.ico" rel="shortcut icon" type="image/x-icon">-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="__PUBLIC__/dist/js/html5shiv.min.js"></script>
      <script src="__PUBLIC__/dist/js/respond.min.js"></script>
    <![endif]-->
    <link rel="shortcut icon" href="favicon.ico">

    <link href="dist/css/main.css" rel="stylesheet">

</head>
<body>
    
    <div class="login-mobile">
        <section class="login-mobile-content">
            <div class="box">
                <h1>用　户　登　录</h1>
                <div class="user"><input type="text" placeholder="帐　号" maxlength="16"></div>
                <div class="pw"><input type="password" placeholder="密　码" maxlength="16"></div>
                <div class="submit"><a>确　认</a></div>
                <div class="memory"><a>忘记密码</a></div>
            </div>
        </section>
    </div>

<script>
(function(){
    function rem() {
        var docEl = document.documentElement;
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        function recalc() {
            docEl.style.fontSize = 100 * (docEl.clientWidth / 640) + 'px';
            setTimeout(function(){
                docEl.classList.add('rem'); 
            },1)
        }
        //绑定浏览器旋转与加载 时
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    }
    rem();

    document.querySelector(".submit a").addEventListener("click",function(){
        var user = document.querySelector(".user input").value;
        var pw = document.querySelector(".pw input").value.length;
        
        if(pw < 7){
            // 密码错误
            document.querySelector(".pw input").classList.add("has-error");
        }else{
            console.log(pw);
        }
    })
})()
</script>
</body>
</html>